<template>
  <d2-container>
    <div class="row-ac pb-2">
      <div><el-button type="warning" @click="addRecord" size="small" icon="el-icon-plus">添加产品</el-button></div>
      <div class="ml-2"><el-button type="danger" size="small" icon="el-icon-delete">批量删除</el-button></div>
    </div>
    <div class="flex-1 ml-2">
      <el-table :data="recordList" border stripe>
        <el-table-column align="center" label="序号" type="index" width="45" />
        <el-table-column align="center" label="图片" prop="image" width="80">
          <template slot-scope="scope">
            <el-popover placement="right" trigger="hover"
              v-if="scope.row.pictrues && scope.row.pictrues !== '' && scope.row.pictrues[0]">
              <el-image slot="reference" style="width: 40px; height: 40px" :src="scope.row.pictrues[0].url"
                fit="cover" />
              <el-image style="width: 220px; height: 220px" :src="scope.row.pictrues[0].url" fit="cover" />
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column align="center" label="记录名称" prop="title" width="180" />
        <el-table-column align="center" label="分类" prop="category_name" width="180" />
        <el-table-column align="center" label="操作" width="230">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.row.id)">修改</el-button>
            <el-button size="mini" type="danger" @click="openDelete(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </d2-container>
</template>

<script>
  import {
    recordListUrl,
    recordDeleteUrl
  } from '@/utils/socialize'
  export default {
    data() {
      return {
        queryInfo: {
          page: 1,
          page_size: 10
        },
        recordList: [],
        recordTotal: 1
      }
    },
    created() {
      this.initData()
    },
    methods: {
      initData() {
        this.getRecordList()
      },
      getRecordList() {
        this.$get(recordListUrl, this.queryInfo).then(res => {
          if (res.data.code == 200) {
            this.recordList = res.data.data.list
            this.recordTotal = res.data.data.total
          }
        })
      },
      handleEdit(recordId) {
        console.log(recordId);
        this.$router.push({
          path: '/record/addRecord',
          query: {
            recordId: recordId
          }
        });
      },
      openDelete() {

      },
      addRecord() {
        this.$router.push({
          path: '/record/addRecord',
        });
      }
    }
  }
</script>

<style>
</style>